<!DOCTYPE html>
<html>
<head>
    <title>maptalks.mapboxgl demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks@^0.40.2/dist/maptalks.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <script type="text/javascript" src="../dist/maptalks.mapboxgl.js"></script>
    <style>
        html,body{
            margin:0px;
        }
        #map {
            width: 100%;
            height:600px;
        }
    </style>
</head>
<body>
<div><a href="javascript:start();">start</a> | <a href="javascript:pause();">pause</a> | <a href="javascript:reset();">reset</a></div></div>
<div id="map"></div>
<script type="text/javascript" >
    mapboxgl.accessToken = 'pk.eyJ1IjoiemhlbmZ1IiwiYSI6ImNpb284bzNoYzAwM3h1Ym02aHlrand6OTAifQ.sKX-XKJMmgtk_oI5oIUV_g';

    var baseLayer = new maptalks.MapboxglLayer('tile',{
        glOptions : {
            'style' : 'mapbox://styles/mapbox/light-v9'
        }
    }).on('layerload', function () {
        start();
    });

    var map = new maptalks.Map("map",{
        //limit max pitch to 60 as mapbox-gl-js required
        maxPitch : 60,
        center:   [-0.138183, 51.44456],
        zoom   :  10,
        baseLayer : baseLayer
    });

    var pitch = 0, d = 'up', bearing = 0;
    var paused = true;

    function changeView() {
      if (pitch > 50) {
        d = 'down';
      } else if (pitch < 0) {
        d = 'up';
      }
      if (d === 'down') {
        pitch--;
      } else {
        pitch++;
      }
      map.setPitch(pitch);
      map.setBearing(bearing++);
      if (!paused) {
        requestAnimationFrame(changeView);
      }
    }

    function reset() {
      requestAnimationFrame(function () {
        paused = true;
        pitch = 0;
        bearing = 0;
        map.setPitch(0);
        map.setBearing(0);
      });
    }

    function start() {
        if(paused){
            paused = false;
            changeView();
        }
    }

    function pause() {
        paused = true;
    }
</script>
</body>
</html>
